<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>mobile-list</title>
  <!-- Bootstrap -->
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
  <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
  <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/css/swiper.min.css">

  <link rel="stylesheet" href="css/mobile-list.css">
</head>
<body>
  <!-- 头部 -->
  <!-- 桌面屏幕 -->
  <div id="header" class="visible-md-block visible-lg-block hidden-xs hidden-sm">
      <nav id="navbar">
          <div class="container">
              <div class="navbar-header">
                  <a href="" class="navbar-brand">LOGO</a>
              </div>
              <ul class="nav navbar-nav navbar-right">
                  <li>
                      <img src="image/home/icon-a.png" alt="">
                      <a href="mobile-login.html">登录</a>
                  </li>
                  <li>
                      <img src="image/home/icon-b.png" alt="">
                      <a href="mobile-list.html">注册</a>
                  </li>
              </ul>
          </div>
      </nav>
      <nav id="subnavbar">
          <div class="container">
              <ul class="nav navbar-nav">
                  <li><a href="mobile-home.html">首页</a></li>
                  <li><a href="mobile-list.html">美食菜单</a></li>
                  <li><a href="mobile-health.html">健康养生</a></li>
                  <li><a href="mobile-user.html">个人中心</a></li>
              </ul>
              <form class="navbar-form navbar-right form" action="/" method="get">
                  <div class="input-group">
                      <input type="text" class="form-control" placeholder="搜索美食、健康养身">
                      <div class="input-group-btn">
                          <button class="btn btn-primary" type="submit">
                              <img src="image/list/icon.png" alt="">
                          </button>
                      </div>
                  </div>
              </form>
          </div>
      </nav>
  </div>
  <!-- 移动设备 -->
  <nav class="visible-xs-block visible-sm-block hidden-md hidden-lg">
      <div class="container">
          <form action="" class="">
              <div class="row">
                  <a href="" class="col-xs-3 col-sm-2 text-left">LOGO</a>
                  <div class="form-group col-xs-7 col-sm-9">
                      <input class="form-control" type="text" placeholder="搜索美食、健康养身">
                      <i class="glyphicon glyphicon-search form-control-feedback" aria-hidden="true"></i>
                  </div>
                  <a class="col-xs-2 col-sm-1 text-right" href="">登录</a>
              </div>
          </form>
      </div>
  </nav>
  <!-- 躯干 -->
  <!-- 桌面屏幕 -->
  <div id="list" class="visible-lg-block visible-md-block hidden-xs hidden-sm ">
    <div class="container">
      <div class="content-header">
        <div class="row">
          <div class="content-header-item col-md-4 col-lg-4 active">
            <div class="thumbnail">
              <img src="image/list/未标题-1.jpg" alt="">
              <div class="caption">
                <h3>家常美食</h3>
              </div>
            </div>
          </div>
          <div class="content-header-item col-md-4 col-lg-4">
            <div class="thumbnail">
              <img src="image/list/未标题-2.jpg" alt="">
              <div class="caption">
                <h3>饮食甜品</h3>
              </div>
            </div>
          </div>
          <div class="content-header-item col-md-4 col-lg-4">
            <div class="thumbnail">
              <img src="image/list/未标题-3.jpg" alt="">
              <div class="caption">
                <h3>美食地图</h3>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-tag">
        <!-- <div class="content-tag-item active">
          <dl>
            <dt>菜系:</dt>
            <dd><a href="mobile-home.html">川菜</a></dd>
            <dd><a href="mobile-home.html">川菜</a></dd>
            <dd><a href="mobile-home.html">川菜</a></dd>
            <dd><a href="mobile-home.html">川菜</a></dd>
            <dd><a href="mobile-home.html">川菜</a></dd>
            <dd><a href="mobile-home.html">川菜</a></dd>
            <dd><a href="mobile-home.html">川菜</a></dd>
            <dd><a href="mobile-home.html">川菜</a></dd>
            <dd><a href="mobile-home.html">川菜</a></dd>
            <dd><a href="mobile-home.html">川菜</a></dd>
            <dd><a href="mobile-home.html">川菜</a></dd>
          </dl>
          <dl>
            <dt>类型:</dt>
            <dd><a href="">主食</a></dd>
            <dd><a href="">主食</a></dd>
            <dd><a href="">主食</a></dd>
            <dd><a href="">主食</a></dd>
            <dd><a href="">主食</a></dd>
          </dl>
          <dl>
            <dt>场景:</dt>
            <dd><a href="">早餐</a></dd>
            <dd><a href="">早餐</a></dd>
            <dd><a href="">早餐</a></dd>
            <dd><a href="">早餐</a></dd>
          </dl>
        </div> -->
      </div>
      <div class="list-content active">
        <div class="content-brand">
          <img src="image/list/未标题-4.jpg" alt="">
        </div>
        <div class="content-media">
          <!-- <div class="media">
            <div class="media-left">
              <a href=""><img src="image/list/未标题-5.jpg" alt="" class="media-object"></a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">怀孕时的饮食禁忌，孕妈妈要格外小心！</h4>
              <span>203人阅读</span>
              <p>每一位孕妈妈都希望自己的宝宝能够健康成长除了在行动方面要格外小心。</p>
              <p>
                <a href="mobile-list.html" class="btn btn-default" role="button">饮食常识</a>
                <a href="mobile-list.html" class="btn btn-default" role="button">饮食常识</a>
                <a href="mobile-list.html" class="btn btn-default" role="button">饮食常识</a>
              </p>
            </div>
          </div> -->
        </div>
        <div class="content-pagination text-center">
          <ul>
            <li><a href="">上一页</a></li>
            <li class="active"><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
            <li><a href="">4</a></li>
            <li><a href="">5</a></li>
            <li><a href="">6</a></li>
            <li><a href="">7</a></li>
            <li><a href="">8</a></li>
            <li><a href="">9</a></li>
            <li><a href="">下一页</a></li>
          </ul>
        </div>
      </div>

    </div>
  </div>
  <!-- 移动设备 -->
  <div id="mobile-list" class="visible-xs-block visible-sm-block hidden-md hidden-lg">
    <!-- 选项卡用来切换视图 -->
    <div class="option">
      <!-- 用于选择视图 -->
      <div id="subnavbar">
        <div class="container">
          <div class="row">
            <!-- id名只能用一次 -->
            <div class="sitem col-xs-3 col-sm-3 active">家常美食</div>
            <div class="sitem col-xs-3 col-sm-3 ">饮食甜品</div>
            <div class="sitem col-xs-3 col-sm-3 ">美食地图</div>
            <div class="sitem col-xs-3 col-sm-3  text-right">

              <span>标签<i></i></span>
              <img src="image/list/mobile-1.png" alt="">
            </div>
          </div>
          
        </div>
      </div>
    </div>

    <div class="mobile-content active">
      <div class="container">
        <!-- 广告牌 -->
        <div class="brand">
          <a href="mobile-home.html" class=""><img src="image/list/mobile-1.jpg" alt=""></a>
        </div>
        <!-- 媒体对象 -->
        <!-- id名只能用一次，尽量语义化 -->
        <!-- <div class="media">
          <div class="media-left">
            <a href=""><img class="media-object" src="image/list/mobile-2.jpg" alt=""></a>
          </div>
          <div class="media-body">
            <h4 class="media-heading"><a href="">怀孕时的饮食禁忌，孕妈妈.....</a></h4>
            <span>203人阅读</span>
            <p>每一位孕妈妈都希望自己的宝宝能够健康成长除了小心。</p>
            <p>
              <a href="" class="btn btn-default" role="button">饮食常识</a>
              <a href="" class="btn btn-default" role="button">饮食常识</a>
              <a href="" class="btn btn-default" role="button">饮食常识</a>
            </p>
          </div>
        </div>
        <div class="media">
          <div class="media-left">
            <a href=""><img class="media-object" src="image/list/mobile-3.jpg" alt=""></a>
          </div>
          <div class="media-body">
            <h4 class="media-heading"><a href="">怀孕时的饮食禁忌，孕妈妈.....</a></h4>
            <span>203人阅读</span>
            <p>每一位孕妈妈都希望自己的宝宝能够健康成长除了小心。</p>
            <p>
              <a href="" class="btn btn-default" role="button">饮食常识</a>
              <a href="" class="btn btn-default" role="button">饮食常识</a>
              <a href="" class="btn btn-default" role="button">饮食常识</a>
            </p>
          </div>
        </div>
        <div class="media">
          <div class="media-left">
            <a href=""><img class="media-object" src="image/list/mobile-4.jpg" alt=""></a>
          </div>
          <div class="media-body">
            <h4 class="media-heading"><a href="">怀孕时的饮食禁忌，孕妈妈.....</a></h4>
            <span>203人阅读</span>
            <p>每一位孕妈妈都希望自己的宝宝能够健康成长除了小心。</p>
            <p>
              <a href="" class="btn btn-default" role="button">饮食常识</a>
              <a href="" class="btn btn-default" role="button">饮食常识</a>
              <a href="" class="btn btn-default" role="button">饮食常识</a>
            </p>
          </div>
        </div>
        <div class="media">
          <div class="media-left">
            <a href=""><img class="media-object" src="image/list/mobile-5.jpg" alt=""></a>
          </div>
          <div class="media-body">
            <h4 class="media-heading"><a href="">怀孕时的饮食禁忌，孕妈妈.....</a></h4>
            <span>203人阅读</span>
            <p>每一位孕妈妈都希望自己的宝宝能够健康成长除了小心。</p>
            <p>
              <a href="" class="btn btn-default" role="button">饮食常识</a>
              <a href="" class="btn btn-default" role="button">饮食常识</a>
              <a href="" class="btn btn-default" role="button">饮食常识</a>
            </p>
          </div>
        </div> -->
      </div>
    </div>
  </div>
  <!-- 尾部 -->
  <!-- 桌面屏幕 -->
  <div id="footer" class="visible-md-block visible-lg-block hidden-xs hidden-sm">
      <div class="footer-content">
          <div class="container">
              <div class="row">
                  <div class="footer-about col-md-5 col-lg-5">
                      <h3>益海嘉里</h3>
                      <p>益海嘉里旗下拥有“金龙鱼”、“欧丽薇兰”、“胡姬花”、“香满园”、 “海皇”、“丰苑”、“金味”、“锐龙”、“绿涤”、“洁劲100”等著名品牌，产品涵盖了小包装食用油、大米、面粉、挂面、米粉、豆奶、餐饮专用粮油、食品原辅料。</p>
                  </div>
                  <div class="footer-contacts col-md-5 col-lg-5">
                      <h3>联系我们</h3>
                      <p>电话：400-616-5757 <br>
                          传真：0755-61864755 <br>
                          邮箱：zhangsan@qq.com <br>
                          地址：中国上海浦东新区陆家嘴环路958号华能联合大厦26楼 <br>
                      </p>
                  </div>
                  <figure class="footer-wechat col-md-2 col-lg-2">
                      <img src="image/home/wechat.jpg" alt="">
                      <figcaption>微信公众号</figcaption>
                  </figure>
              </div>
          </div>
      </div>
      <div class="footer-bottom">
          <div class="container text-center">
              <p>
                  <a  class="first" href="mobile-.html">首页</a>
                  <a href="mobile-list.html">美食地图</a>
                  <a href="mobile-health.html">健康养生</a>
                  <a  class="last" href="mobile-user.html">个人中心</a>
              </p>
              <p>2017版权所有：本网站信息属于益海嘉里 版权所有 Copyright © 2009 京 ICP 备 12025066 号 -1</p>
          </div>
      </div>
  </div>
  <!-- 移动设备 -->
  <div id="mobile-footer" class="visible-xs-block visible-sm-block hidden-md hidden-lg">
      <div class="container">
          <ul class="">
              <li><a href="mobile-home.html">首页</a></li>
              <li class="active"><a href="mobile-list.html">美食菜单</a></li>
              <li><a href="mobile-health.html">健康养生</a></li>
              <li><a href="mobile-user.html">个人中心</a></li>
          </ul>
      </div>
  </div>
  
  <script data-main="js/app" src="js/require.js"></script>
</body>
</html>